<style>

.form-section {
  margin-bottom: 20px;
  padding-right: 20px;
}

.form-section h3 {
  border-bottom: 2px solid #1890ff;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  margin-bottom: 10px;
}

.form-group label {
  width: 100px;
  padding-right: 10px;
}

.form-group input,
.form-group select {
  flex: 1;
  padding: 5px;
}

.send-receive-section {
  display: flex;
  justify-content: space-between;
}

.form-section.send, .form-section.receive {
  width: 48%;
}

.form-section.send h3, .form-section.receive h3 {
  background-color: #ffecb3; /* 发货背景色 */
}

.form-section.receive h3 {
  background-color: #e7f7e8; /* 收货背景色 */
}

.submit-buttons {
  margin-top: 20px;
}

.sl {
  text-align: right;
}
</style>
<template>
  <div class="app">
    <div class="a"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <div class="form-section">
        <h3>基础信息</h3>
        <el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
          <el-form-item class="input" label="订单编号" prop="ddh">
            <el-input v-model="form.ddh" placeholder="D20231002120"/>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-select v-model="form.kcname" clearable placeholder="请选择">
              <el-option label="广州物流有限公司" value="广州物流有限公司"></el-option>
              <el-option label="三只羊集团" value="三只羊集团"></el-option>
              <el-option label="无忧传媒" value="无忧传媒"></el-option>
              <el-option label="河南物流有限公司" value="河南物流有限公司"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="input" label="客户编号" prop="customerID">
            <el-input v-model="form.customerID" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="始发地" prop="sfd">
            <el-select v-model="form.sfd" placeholder="请选择">
              <el-option label="河南" value="河南"></el-option>
              <el-option label="河北" value="河北"></el-option>
              <el-option label="石家庄" value="石家庄"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地" prop="mdd">
            <el-select v-model="form.mdd" placeholder="请选择">
              <el-option label="北京" value="北京"></el-option>
              <el-option label="上海" value="上海"></el-option>
              <el-option label="广州" value="广州"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同" prop="hetong">
            <el-select v-model="form.hetong"  prop="hetong" clearable placeholder="请选择">
              <el-option label="合同一" value="合同一"></el-option>
              <el-option label="合同二" value="合同二"></el-option>
              <el-option label="合同三" value="合同三"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运输类型" prop="yslx">
            <el-select v-model="form.yslx" clearable placeholder="请选择">
              <el-option label="整车" value="整车"></el-option>
              <el-option label="零件" value="零件"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货物类型" prop="hwlx">
            <el-select v-model="form.hwlx" clearable placeholder="请选择">
              <el-option label="日用品" value="日用品"></el-option>
              <el-option label="食品" value="食品"></el-option>
              <el-option label="文件" value="文件"></el-option>
              <el-option label="家具" value="家具"></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="订单来源" prop="laiyaun">
            <el-select v-model="form.laiyaun" clearable placeholder="请选择">
              <el-option label="手动添加" value="手动添加"></el-option>
              <el-option label="App用户下单" value="App用户下单"></el-option>
              <el-option label="系统导入" value="系统导入"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
                v-model="form.time"
                placeholder="选择日期"
                type="date"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>


      <div class="b">
        <div class="send-receive-section">
          <div class="form-section send">
            <h3>发货信息</h3>
            <el-form ref="form" :model="form"  :rules="rules" inline label-width="100px">
              <el-form-item label="联系人">
                <el-input v-model="form.fname" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.fphone" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="form.faddress" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="计划发货日期">
                <el-date-picker
                    v-model="form.ktime"
                    placeholder="选择日期"
                    type="date"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div class="form-section receive">
            <h3>收货信息</h3>
            <el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
              <el-form-item label="联系人">
                <el-input v-model="form.sname" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="form.sphone" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="form.saddress" placeholder="请输入内容"/>
              </el-form-item>
              <el-form-item label="计划收货日期">
                <el-date-picker
                    v-model="form.stime"
                    placeholder="选择日期"
                    type="date"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <div class="a"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>收货信息</h3>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号">
        </el-table-column>
        <el-table-column
            prop="hwmc"
            label="货物名称">
          <template slot-scope="scope">
            <el-select v-model="form.hwmc" clearable placeholder="请选择">
              <el-option v-for=" title in goodsmanagementList"
                         :label="title.goodsName"
                         :value="title.goodsName"

              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="num"
            label="数量">
          <template slot-scope="scope">
            <el-input-number v-model="form.num" controls-position="right" size="small" :min="1" placeholder="请输入内容"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
            prop="danwei"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="zjt"
            label="体积(m)">
          <template slot-scope="scope">
            <el-input v-model="form.zjt" placeholder="请输入体积"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            prop="zl"
            label="重量(kg)">
          <template slot-scope="scope">
            <el-input v-model="form.zl" placeholder="请输入重量"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
<!--            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <br>
      <span>合计：</span>
      <div class="sl"><span>总数量:{{num}}   总体积:0(m3)   总重量:0(kg)</span></div>
    </div>


    <div class="xuqiu"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>需求车辆</h3>
      <el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
        <el-form-item label="车辆类型">
          <el-select v-model="form.chetype" clearable placeholder="请选择">
            <el-option label="小轿车" value="小轿车"></el-option>
            <el-option label="面包车" value="面包车"></el-option>
            <el-option label="冷藏车" value="冷藏车"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车长">
          <el-select v-model="form.chechang" clearable placeholder="请选择">
            <el-option label="5米2" value="5米2"></el-option>
            <el-option label="6米2" value="6米2"></el-option>
            <el-option label="6米8" value="6米8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用车数量">
          <el-input v-model="form.ycnum" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="feiyong" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>费用信息</h3>
      <el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
        <el-form-item label="计费方式">
          <el-select v-model="form.jsfs" clearable placeholder="请选择">
            <el-option label="按重量计算" value="按重量计算"></el-option>
            <el-option label="按体积计算" value="按体积计算"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输费">
          <el-input v-model="TransportFee" @blur="ys" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="保险费">
          <el-input v-model="InsuranceFee" @blur="bx" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="包装费">
          <el-input v-model="PackagingFee" @blur="bz" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="装卸费">
          <el-input v-model="LoadingUnloadingFee" @blur="zx" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="中转费">
          <el-input v-model="TransferFee" @blur="zz" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="燃油费">
          <el-input v-model="FuelFee" @blur="yy" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="服务费">
          <el-input v-model="ServiceFee" @blur="fw" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="其他费用">
          <el-input v-model="OtherFees" @blur="qt" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="费用合计">
          <el-input v-model="TotalFees" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="fukuan" style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>付款方式</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="现付">
          <el-input v-model="CashOnDelivery" @blur="xf" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="预付">
          <el-input v-model="AdvancePayment" @blur="yf" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="到付">
          <el-input v-model="PayOnArrival" @blur="df" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="周期付">
          <el-input v-model="PeriodicPayment" @blur="zqf" placeholder="请输入内容"/>
        </el-form-item>
        <br>
        <el-form-item label="付费合计">
          <el-input v-model="TotalPayment" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
    </div>

    <div class="dingdan"
         style="margin: auto; margin-top: 20px; border-radius:5px; padding: 20px; width: 80%;  background: #FFFFFF;">
      <h3>订单备注</h3>
      <el-form ref="form" :model="form" inline label-width="100px">
        <el-form-item label="">
          <el-input v-model="form.bz" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">立即创建</el-button>
          <el-button type="primary" @click="quxiao()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import {addGoods, getGoods, listGoods, updateGoods} from "@/api/goods/goods";
import {getGoodsmanagement, listGoodsmanagement} from "../../api/goodsmanagement/goodsmanagement";

export default {
  data() {
    return {
      goodsmanagementList: [],
      CashOnDelivery: '',
      AdvancePayment: '',
      PayOnArrival: '',
      PeriodicPayment: '',
      TotalPayment: 0,
      form: {
        ddh: 'D20231002120',

      },
      TransportFee: '',
      InsuranceFee: '',
      PackagingFee: '',
      LoadingUnloadingFee: '',
      TransferFee: '',
      FuelFee: '',
      ServiceFee: '',
      OtherFees: '',
      TotalFees: 0,
      tableData: [{
        id: '1',
        danwei: '箱',
      }],
      num: '',
      // sphone:[{
      //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      //   message: "请输入正确的手机号码",
      //   trigger: "blur"
      // }],
  rules:{
    fphone:[{
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }],
    sphone: [
      { required: true, message: "请输入手机号码", trigger: "blur" },
      { pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
    ],
  },



    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    xf() {
      if(this.CashOnDelivery === '' || this.CashOnDelivery == null){
        this.CashOnDelivery = 0;
      }else{
        this.CashOnDelivery = this.CashOnDelivery;
      }
      // 获取现付输入框的值
      var cashOnDelivery = parseFloat(this.CashOnDelivery);
      // 将现付的值赋给付费合计输入框
      this.TotalPayment = this.TotalPayment + cashOnDelivery;
    },
    yf() {
      if(this.AdvancePayment === '' || this.AdvancePayment == null){
        this.AdvancePayment = 0;
      }else{
        this.AdvancePayment = this.AdvancePayment;
      }
      // 获取预付输入框的值
      var advancePayment = parseFloat(this.AdvancePayment);
      // 将预付的值赋给付费合计输入框
      this.TotalPayment = this.TotalPayment + advancePayment;
    },
    df() {
      if(this.PayOnArrival === '' || this.PayOnArrival == null){
        this.PayOnArrival = 0;
      }else{
        this.PayOnArrival = this.PayOnArrival;
      }
      // 获取到付输入框的值
      var payOnArrival = parseFloat(this.PayOnArrival);
      // 将到付的值赋给付费合计输入框
      this.TotalPayment = this.TotalPayment + payOnArrival;
    },
    zqf() {
      if(this.PeriodicPayment === '' || this.PeriodicPayment == null){
        this.PeriodicPayment = 0;
      }else{
        this.PeriodicPayment = this.PeriodicPayment;
      }
      // 获取周期付输入框的值
      var periodicPayment = parseFloat(this.PeriodicPayment);
      // 将周期付的值赋给付费合计输入框
      this.TotalPayment = this.TotalPayment + periodicPayment;
    },
    findGoods() {
      var id = this.$route.query.id;
      getGoods(id).then(response => {
        console.log(response);
        this.form = response.data;
        this.TotalFees=response.data.fyhj;
        this.TotalPayment=response.data.ffhj;
      });
    },
    huowu(){
      listGoodsmanagement(this.queryParams).then(response => {
        this.goodsmanagementList = response.rows;
      });
    },
    quxiao(){
      this.$router.push({path: '/goods/goods'});
    },
    onSubmit() {
      if(Object.keys(this.form).length === 0) {
        this.$modal.msgError("请填写订单信息");
        return;
      }
      // this.form.yunshufei=this.TransportFee;
      // this.form.baoxianfei=this.InsuranceFee;
      // this.form.baozhuangfei=this.PackagingFee;
      // this.form.zhuangxiefei=this.LoadingUnloadingFee;
      // this.form.zhongzhuanfei=this.TransferFee;
      // this.form.ryf=this.FuelFee;
      // this.form.fwf=this.ServiceFee;
      // this.form.qtfy=this.OtherFees;
      this.form.fyhj=this.TotalFees;
      // this.form.xf=this.CashOnDelivery;
      // this.form.yf=this.AdvancePayment;
      // this.form.df=this.PayOnArrival;
      // this.form.zqf=this.periodicPayment;
      this.form.ffhj=this.TotalPayment;

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGoods(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$router.push({path: '/goods/goods'});
            });
          } else {
            addGoods(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$router.push({path: '/goods/goods'});
            });
          }
        }
      });
      // addGoods(this.form).then(response => {
      // this.$modal.msgSuccess("成功");
      // this.$router.push({path: '/goods/goods'});
      // })
    },
    ys() {
      if(this.TransportFee === '' || this.TransportFee == null){
        this.TransportFee = 0;
      }else{
        this.TransportFee = this.TransportFee;
      }
      // 获取运输费输入框的值
      var transportFee = parseFloat(this.TransportFee);
      // 将运输费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees +transportFee;
    },
    bx() {
      if(this.InsuranceFee === '' || this.InsuranceFee == null){
        this.InsuranceFee = 0;
      }else{
        this.InsuranceFee = this.InsuranceFee;
      }
      // 获取保险费输入框的值
      var insuranceFee = parseFloat(this.InsuranceFee);
      // 将保险费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + insuranceFee;
    },
    bz() {
      if(this.PackagingFee === '' || this.PackagingFee == null){
        this.PackagingFee = 0;
      }else{
        this.PackagingFee = this.PackagingFee;
      }
      // 获取包装费输入框的值
      var packagingFee = parseFloat(this.PackagingFee);
      // 将包装费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + packagingFee;
    },
    zx() {
      if(this.LoadingUnloadingFee === '' || this.LoadingUnloadingFee == null){
        this.LoadingUnloadingFee = 0;
      }else{
        this.LoadingUnloadingFee = this.LoadingUnloadingFee;
      }
      // 获取装卸费输入框的值
      var loadingUnloadingFee = parseFloat(this.LoadingUnloadingFee);
      // 将装卸费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + loadingUnloadingFee;
    },
    zz() {
      if(this.TransferFee === '' || this.TransferFee == null){
        this.TransferFee = 0;
      }else{
        this.TransferFee = this.TransferFee;
      }
      // 获取中转费输入框的值
      var transferFee = parseFloat(this.TransferFee);
      // 将中转费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + transferFee;
    },
    yy() {
      if(this.FuelFee === '' || this.FuelFee == null){
        this.FuelFee = 0;
      }else{
        this.FuelFee = this.FuelFee;
      }
      // 获取燃油费输入框的值
      var fuelFee = parseFloat(this.FuelFee);
      // 将燃油费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + fuelFee;
    },
    fw() {
      if(this.ServiceFee === '' || this.ServiceFee == null){
        this.ServiceFee = 0;
      }else{
        this.ServiceFee = this.ServiceFee;
      }
      // 获取服务费输入框的值
      var serviceFee = parseFloat(this.ServiceFee);
      // 将服务费的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + serviceFee;
    },
    qt() {
      if(this.OtherFees === '' || this.OtherFees == null){
        this.OtherFees = 0;
      }else{
        this.OtherFees = this.OtherFees;
      }
      // 获取其他费用输入框的值
      var otherFees = parseFloat(this.OtherFees);
      // 将其他费用的值赋给费用合计输入框
      this.TotalFees = this.TotalFees + otherFees;
    },
  },
  created() {
    if(this.$route.query.id == undefined){
      console.log( this.$route.query.id+"....."+(this.$route.query.id!==undefined))
      if(this.$route.query.id!==undefined){
        this.findGoods();
      }
    }else{
      this.findGoods();
    }
    this.huowu();
  },


}


</script>















